<template>
  <rj-modal
    :title="$t('group.name')"
    :visible="visible"
    :maskClosable="false"
    :width="1100"
    :footer="null"
    :bodyStyle="{ height: '550px' }"
    @cancel="handelModalCancel"
  >
    <div class="gMcontent">
      <div class="group-manage-left">
        <rj-group
          ref="rjGroup"
          @getCurrentGroupInfo="getCurrentGroupInfo"
          :groupId="groupId"
          :showGroupType="showGroupType"
          class="groupSelect"
        ></rj-group>
      </div>
      <div class="group-manage-right">
        <GroupOperate :groupInfo="selectGroupInfo" v-if="selectGroupInfo" />
      </div>
    </div>
  </rj-modal>
</template>

<script>
import { RjModal, RjGroup } from '@components';
import GroupOperate from './groupOperate';
import { mapState } from 'vuex';
export default {
  name: 'GroupManage',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showGroupType: ['ROOT', 'LOCATION', 'BUILDING'],
      selectGroupInfo: null,
    };
  },
  components: {
    'rj-modal': RjModal,
    'rj-group': RjGroup,
    GroupOperate,
  },

  computed: {
    ...mapState('Group', {
      groupId(state) {
        const { grouproot } = state;
        return grouproot.groupId;
      },
    }),
  },
  mounted() {
    // const info =
    //   this.$refs.rjGroup && this.$refs.rjGroup.getGroupInfo(this.groupId);
    // this.selectGroupInfo = info;
  },
  watch: {
    // visible(val) {
    //   if (val) {
    //     const info =
    //       this.$refs.rjGroup && this.$refs.rjGroup.getGroupInfo(this.groupId);
    //     this.selectGroupInfo = info;
    //   } else {
    //     this.restParams();
    //   }
    // },
    visible: {
      handler(val) {
        if (val) {
          const info =
            this.$refs.rjGroup && this.$refs.rjGroup.getGroupInfo(this.groupId);
          this.selectGroupInfo = info;
        } else {
          this.restParams();
        }
      },
      immediate: true,
    },
    selectGroupInfo(val) {
      console.log('val');
    },
  },
  methods: {
    handelModalCancel() {
      this.$emit('onclose');
    },
    getCurrentGroupInfo(groupInfo) {
      if (!groupInfo) return;
      this.selectGroupInfo = { ...groupInfo };
    },
    updateTree() {
      this.$store.dispatch('Group/getGroupTree');
    },
    //重置组件参数
    restParams() {
      this.selectGroupInfo = null;
    },
  },
};
</script>

<style lang="less" scoped>
.gMcontent {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  height: 100%;
  .group-manage-left {
    width: 250px;
    margin-right: 10px;
    .groupSelect {
      width: 100%;
      height: 100%;
      background: #eaeef4;
    }
    /deep/ .pop-search {
      display: flex;
      flex-direction: column;
      .global-search {
        margin: 10px 0;
      }
      .seltree-sel {
        flex: 1;
      }
    }
  }
  .group-manage-right {
    flex: 1;
    height: 100%;
  }
}
</style>
